<template>
	<view class="container">
		<c-cu-custom bgColor="bg-gradual-theme" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">任务名称</block>
		</c-cu-custom>

		<view class="bg-white padding-sm">
			<view class=" text-blod flex align-center">
				<text class="lg text-color-main cuIcon-form text-xxl"></text>
				<text class="text-blod text-black text-lg">项目提示</text>
			</view>
			<view class="grid col-3 text-center margin-top-lg">
				<view class="bd-r">
					<view class="text-shadow text-blue text-blod text-lg">
						大柜
					</view>
					<view class="text-gray">
						身份
					</view>
				</view>
				<view class="bd-r">
					<view class="text-shadow text-red text-blod text-lg">
						24H
					</view>
					<view class="text-gray">
						做单时限
					</view>
				</view>
				<view>
					<view class="text-shadow text-blod text-lg">
						06:00～21:00
					</view>
					<view class="text-gray">
						审核时间
					</view>
				</view>
			</view>
		</view>

		<view class="bg-white padding-sm margin-top-sm">
			<view class="flex justify-between">
				<view class="text-blod flex align-center">
					<text class="lg text-color-main cuIcon-form text-xxl"></text>
					<text class="text-blod text-black text-lg">项目价格</text>
				</view>
				<view class="">
					<button class="cu-btn round text-white bg-theme shadow">
						晋升条件<text class="lg cuIcon-right"></text>
					</button>
				</view>
			</view>
			<view class="margin-top-sm">
				<uni-table stripe border emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="60" align="center">身份</uni-th>
						<uni-th width="60" align="center">身份1</uni-th>
						<uni-th width="60" align="center">身份2</uni-th>
						<uni-th width="60" align="center">身份3</uni-th>
						<uni-th width="60" align="center">身份4</uni-th>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">直邀价</uni-td>
						<uni-td align="center">0.1234</uni-td>
						<uni-td align="center">10.1234</uni-td>
						<uni-td align="center">0.123</uni-td>
						<uni-td align="center">0.1</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">间邀价</uni-td>
						<uni-td align="center">0.1234</uni-td>
						<uni-td align="center">10.1234</uni-td>
						<uni-td align="center">0.123</uni-td>
						<uni-td align="center">0.1</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>

		<view class="margin-top-sm">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub text-lg text-blod" :class="index==navTabCur?'text-orange cur':''"
						v-for="(item,index) in navTab" :key="index" @tap="navTabSelect" :data-id="index">
						{{item}}
					</view>
				</view>
			</scroll-view>

			<view class="padding-sm bg-white" v-if="navTabCur==0">

				<!-- <u-parse :content="content"></u-parse> -->
				<mp-html :content="detail.yq_content"></mp-html>

				
				<view class="cus-form" v-if="detail.cus_form">
					<form>
						<view class="form-item" v-for="(form,index) in detail.cus_form" :key="index">
							<view class="cu-form-group " v-if="form.form_type=='input'">
								<view class="title">{{ form.name }}</view>
								<input :placeholder="'请输入'+form.name" v-model="form.value" :name="form.key" ></input>
							</view>
							
							<view class="cu-form-group" v-if="form.form_type=='time'">
								<view class="title">{{ form.name }}</view>
								<input :placeholder="'请输入'+form.name" v-model="form.value" :name="form.key" @focus="chooseTime(index)"></input>
								
							</view>
							
							<view class="cu-form-group" v-if="form.form_type=='img'">
								<view class="title">{{ form.name }}</view>
							</view>
							<view class="cu-form-group" v-if="form.form_type=='img'">
								<u-upload :fileList="fileList3"
								@afterRead="afterRead" 
								@delete="deletePic" :name="form.key"
								:maxCount="1" :previewFullImage="true"></u-upload>
							</view>
						</view>
					</form>
				</view>

				<button class="cu-btn block bg-blue margin-top-lg" @click="cusFormCommit">申请参与活动</button>
			</view>
			
			<u-datetime-picker
						:show="showTime"
						v-model="timeVal"
						mode="datetime"
						closeOnClickOverlay
						@confirm="confirmTime"
						@cancel="cancelTime"
						@close="closeTime"
			></u-datetime-picker>		

			<!-- 审核记录 -->
			<view class="padding-sm bg-white" v-if="navTabCur==1">
				<u-subsection :list="taskTab" :current="taskTabCur" mode="subsection" activeColor="#f56c6c"
					@change="taskTabChange"></u-subsection>


				<view class="u-page">
					<u-list @scrolltolower="scrolltolower">
						<u-list-item v-for="(item, index) in indexList" :key="index">

							<view class="cu-list menu-avatar">
								<view class="cu-item cur">
									<view class="cu-avatar radius lg"
										style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">

									</view>
									<view class="content">
										<view>
											<view class="text-cut">任务名称</view>
										</view>
										<view class="text-gray text-sm flex">
											<view class="text-cut">
												<text class="cuIcon-time text-orange margin-right-xs"></text> 2024-10-12 12:09:10
											</view>
										</view>
									</view>
									<view class="action">
										<view class="text-price text-red"><text>6.1323</text></view>
									</view>
								</view>
							</view>
							
						</u-list-item>
					</u-list>
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	import { detail } from "@/api/activity.js";
	export default {
		data() {
			return {
				activityId:0,//活动ID
				detail:{},//项目详情
				showTime:false,
				timeVal:Number(new Date()),
				timeIndex: 0,
				
				navTab: ['项目流程', '审核记录'],
				navTabCur: 0,
				taskTab: ['进行中', '已完成', '申诉'],
				taskTabCur: 0,

				indexList: [],
				indexList1: [],
				indexList2: [],
			}
		},
		onLoad(options) {
			if(options.id){
				this.activityId = options.id;
				this.getDetail();
			}
		},
		methods: {
			getDetail(){//获取活动详情
				var that = this;
				detail({id:this.activityId}).then(res => {
					that.detail = res.data;
				}).catch(err => {
					console.log(err);
				});
			},
			navTabSelect(e) {
				this.navTabCur = e.currentTarget.dataset.id;
			},
			taskTabChange(item) {
				this.taskTabCur = item;
			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				var _this = this;
				//获取做过的任务列表
			},
			confirmTime(e){//确认选择时间
				this.showTime = false;
				let timestamp = e.value
				let date = new Date(timestamp);
				 
				// 手动构建字符串
				let year = date.getFullYear();
				let month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
				let day = ('0' + date.getDate()).slice(-2);
				let hours = ('0' + date.getHours()).slice(-2);
				let minutes = ('0' + date.getMinutes()).slice(-2);
				
				this.detail.cus_form[this.timeIndex].value = year+'-'+month+'-'+day+' '+hours+':'+minutes;
			},
			cancelTime(){
				console.log(3);
				this.showTime = false;
			},
			closeTime(){
				console.log(2);
				this.showTime = false;
			},
			chooseTime(index){
				console.log(1);
				this.timeIndex = index
				this.showTime = true;
			},
			cusFormCommit(){//自定义表单提交
				console.log(this.detail.cus_form);
			},
		}

	}
</script>

<style lang="scss">
	.container {
		.bd-r {
			border-right: 1px #ebeef5 solid;
		}
		.form-item{
			border-bottom: 1rpx solid #eee;;
			.cu-form-group{
				border-top: unset !important;
				// min-height: 75rpx;
			}
		}
	}
</style>